// 1, 写入验证码
$('#sc')
    .html(getVC())
    .click(function () {
        // 点击时 给 标签 再次写入新的验证码
        $('#sc').html(getVC());
    });

// 2, 用户名验证
// 账号input 失去焦点触程序
$('[name="userName"]').blur(function () {
    // 调用函数 查询用户名
    selectName();
});

// 3, 注册效果
// 点击 注册按钮 实现账号密码 注册功能
$('button').click(function () {
    // 调用 函数 实现注册功能
    setRegister();
});

// 使用 async await 调用promise封装函数
async function selectName() {
    // 获取 账号input 标签 数据数值
    let name = $('[name="userName"]').val();

    // 通过 await 调用函数程序 返回 相应的响应体结果
    // res中 存储的就是响应体数据
    const res = await myPromiseAjax('../server/goods_select.php', 'post', { userName: name }, 'json');
    console.log(res);
    // 根据 res中的数据 动态渲染生成页面
    if (res.code === 1) {
        // 用户名 可以使用 写入提示信息
        $('[name="nameSpan"]').html('<span style="color:blue">您的账号可以使用</span>');
    } else if (res.code === 0) {
        // 用户名 不能使用 写入提示信息
        $('[name="nameSpan"]').html('<span style="color:red">您的账号重复,不能使用</span>');
    }
}

// 使用 async await 调用promise封装函数
async function setRegister() {
    // 获取数据 账号 密码 确认密码 验证码
    let name = $('[name="userName"]').val();
    let pwd1 = $('[name="pwd1"]').val();
    let pwd2 = $('[name="pwd2"]').val();
    let vc = $('[name="vc"]').val();

    // 做简单的数据验证

    // 两个密码要 完全相同
    // 如果不同 写入提示信息 终止之后程序的执行
    if (pwd1 !== pwd2) {
        // 写入提示信息
        $('[name="pwdSpan"]').html('<span style="color:red">您输入的两个密码不一致</span>');

        // 再次生成有一个新的验证码
        $('#sc').html(getVC());

        // 使用 return 终止之后程序的执行
        return;
    } else if (pwd1 === pwd2) {
        // 错误提示信息 清空
        $('[name="pwdSpan"]').html('');
    }

    // 验证码 不区分大小写
    // 验证码input标签的数据val 和 验证码a标签的内容html 一直
    if (vc.toLowerCase() !== $('#sc').html().toLowerCase()) {
        // 写入提示信息
        $('[name="vcSpan"]').html('<span style="color:red">您输入的两个验证码不一致</span>');

        // 再次生成有一个新的验证码
        $('#sc').html(getVC());

        // 使用 return 终止之后程序的执行
        return;
    } else if (vc.toLowerCase() === $('#sc').html().toLowerCase()) {
        // 清空错误提示信息
        $('[name="vcSpan"]').html('');
    }

    // 发送请求
    const res = await myPromiseAjax('../server/goods_register.php', 'post', { userName: name, userPwd: pwd1 }, 'json');

    // 根据 res的结果 动态生成页面
    if (res.code === 1) {
        let time = 5;

        // 注册成功
        // 默认5秒后跳转 首页面 点击 可以跳转 登录页面
        $('[name="result"]').html(`<span>恭喜您注册成功,${time}秒,后跳转首页面,<a href="./login.html">点击跳转登录页面</a></span>`);

        // 定义一个定时器 执行 倒计时效果
        let t = setInterval(() => {
            // 变量--
            time--;

            // 写入新的内容
            $('[name="result"]').html(`<span>恭喜您注册成功,${time}秒,后跳转首页面,<a href="./login.html">点击跳转登录页面</a></span>`);

            if (time === 1) {
                // 清除定时器
                clearInterval(t);

                // 跳转 首页面
                window.location.href = './index.html';
            }
        }, 1000);
    }
}

// 1.生成验证码
$('#sc')
    .html(getVC())
    .click(function () {
        $('#sc').html(getVC());
    });

// 2,  账号input 失去焦点 验证账号是不是能用
$('[name="userName"]').blur(function () {
    selsctName();
});

// 3,  注册button按钮
$('button').click(function () {
    if ($('[name="userName"]').val() === '') {
        $('[name="nameSpan"]').html('<sapn style="color:blue">您的账号为空</sapn>');
        return;
    }
    setRegister();
});

async function selsctName() {
    let name = $('[name="userName"]').val();

    const res = await myPromiseAjax('../server/goods_select.php', 'post', { userName: name }, 'json');
    console.log(res);

    if (res.code === 1) {
        $('[name="nameSpan"]').html('<sapn style="color:blue">您的账号可以使用</sapn>');
    } else if (res.code === 0) {
        $('[name="nameSpan"]').html('<sapn style="color:red">您的账号重复,不能使用</sapn>');
    }
}

// async function setRegister() {
//   let name = $('[name="userName"]').val();
//   let pwd1 = $('[name="pwd1"]').val();
//   let pwd2 = $('[name="pwd2"]').val();
//   let vc = $('[name="vc"]').val();

//   if (pwd1 !== pwd2) {
//     $('[name="pwdSpan"]').html('<sapn style="color:red">您的密码错误，请重新输入</sapn>');
//     $('#sc').html(getVC());
//     return;
//   } else if (pwd1 === pwd2) {
//     $('[name="pwdSpan"]').html('');
//   }

//   // 验证码不区分大小写
//   if (vc.toLowerCase() !== $('#sc').html().toLowerCase()) {
//     $('[name="vcSpan"]').html('<sapn style="color:red">您的验证码错误，请重新输入</sapn>');
//     $('#sc').html(getVC());
//     return;
//   } else if (vc.toLowerCase() === $('#sc').html().toLowerCase()) {
//     $('[name="vcSpan"]').html('');
//   }

//   const res = await myPromiseAjax('../server/goods_register.php', 'post', { userName: name, userPwd: pwd1 }, 'json');
//   // console.log(res);

//   if (res.code === 1) {
//     let time = 5;

//     $('[name="result"]').html(`<span>恭喜您注册成功,${time}秒,后跳转首页面,<a href="./login.html">点击跳转登录页面</a></span>`);

//     let t = setInterval(() => {
//       time--;
//       $('[name="result"]').html(`<span>恭喜您注册成功,${time}秒,后跳转首页面,<a href="./login.html">点击跳转登录页面</a></span>`);

//       if (time === 1) {

//         clearInterval(t);
//         window.location.href = './index.html';
//       }
//     }, 1000);

//   }
// }
